import { defineComponent, ref } from "vue";
import childOne from './children/child1.jsx'
export default defineComponent({
    name: "app",
    setup(props, ctx) {
        const msg = ref('hello world')
        const show = ref(true)

        const goods = ref([
            '汉堡',
            '炸鸡',
            '牛奶'
        ])
        function sayHello() {
            console.log("我被点击");
            msg.value = 'hello boy'
            show.value = show.value ? false : true
        }
        const slots = {
            default:()=><div>default</div>,
            bar:()=><div>{msg.value}</div>,
        }
        return () => (
            <div
            >
                <div>{
                    show.value ? <p>哈哈哈哈</p> : <p>呵呵呵</p>
                }</div>
                <button onClick={sayHello}>
                    点击
                </button>
                <ul>
                    {
                        goods.value.map((item,index) => {
                            return <li>{index}.{item}</li>
                        })
                    }

                </ul>
                {/* 传普通值 */}
                <childOne msg={msg.value} v-slots={slots}> </childOne>
            </div>
        );
    },
});